import React, { FC, useContext, useState } from 'react'
import { Row, Col } from 'antd';
import { PlayCircleOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';

import Player from './Player';
import SelectionList from './SelectionList';
import BulletChat from './BulletChat';
import ToolsPanel from './ToolsPanel';
import { PlayerCtx } from '../context-manager/contextManager';

interface Props {

}

/**
 * 整体逻辑：
 *   1. 当点击视频列表时，传出当前播放的ID，选集列表不做过多操作，只负责展示列表和点击时传出点击的数据
 *   2. 播放器根据传入的ID找到当前播放URL进行播放，播放器内部只负责播放和接收数据传出数据，不要过多的操作，保证组件的单一性
 *   3. 如果需要记住播放哪一集，哪个时间，就要播放器监听卸载时机，保存相关数据，监听函数传入，播放器只负责向外传出数据，不做其他操作
 * @param props 
 * @returns 
 */
const SuperPlayer: FC<Props> = (props: Props) => {
    // 当前播放的视频索引
    const [videoIndex, setVideoIndex] = useState<number>(0);
    console.log('======superVideo=====');
    return (
        <div className='v-wrap' style={{ backgroundColor: '#fff', paddingTop: 20 }}>
            <PlayerCtx.Provider value={{ videoIndex, setVideoIndex }}>
                <Row gutter={20} wrap={false}>
                    {/* 左侧播放区 */}
                    <Col flex="auto">
                        {/* 标题区域 */}
                        <div className='video-introduction'>
                            <div className='video-title one-line'>天下无贼</div>
                            <div className='video-desc'>
                                <span title={`播放量`} className='icon'><PlayCircleOutlined /> 2万</span>
                                <span title={`点赞数`} className='icon'><LikeOutlined /> 2.1万</span>
                                <span className='icon'>上传时间： 2022-01-13</span>
                            </div>
                        </div>
                        {/* 播放器 */}
                        <Player />
                        {/* 点赞，收藏，分享面板 */}
                        <div className='video-tools'>
                            {/* 预留弹幕功能 */}
                            <div className='bullet-chat'>
                                <BulletChat />
                            </div>
                            {/* 分享等功能 */}
                            <ToolsPanel />
                        </div>
                    </Col>
                    {/* 电影、短视频等可以不显示选集列表 */}
                    <Col flex="320px">
                        {/* 选集 */}
                        <SelectionList index={videoIndex} />
                    </Col>
                </Row>
            </PlayerCtx.Provider>
        </div>
    )
}

export default SuperPlayer;
